import { useStorage } from '@vueuse/core'
import { ref, computed } from 'vue'
import { Todo } from '../types/todo'

const todos = ref<Todo[]>([])
useStorage('todos-state', todos)

export default () => {
  const deleteTodo = (id: number) => {
    todos.value = todos.value.filter((todo) => todo.id !== id)
  }

  const changeDone = (id: number) => {
    const todo = todos.value.find((todo) => todo.id === id)
    if (todo) {
      todo.done = !todo.done
    }
  }

  const addTodo = (text: string) => {
    const todo: Todo = {
      id: todos.value.length + 1,
      text: text,
      done: false,
    }
    todos.value.unshift(todo)
  }

  const doneCount = computed(() => {
    return todos.value.filter((todo) => todo.done).length
  })

  const count = computed(() => {
    return todos.value.length
  })

  return { todos, deleteTodo, addTodo, changeDone, doneCount, count }
}
